const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/index.jsx'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'webpack基本配置',
            template: 'template.html',
            favicon: '',
            cache: true,
            hash: true,
            minify: {
                removeComments: true, // 去掉注释
                collapseWhitespace: true // 去掉空格
            },
            meta: {

            },
            publicPath: 'http://cdn.com/', // 上线地址
            // filename: 'main.html',
            path: path.resolve(__dirname, 'dist'), // 出口文件位置
        }),

        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        // 提取
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],

    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    module: {
        rules: [{
                test: /\.(css|scss)$/,
                include: path.resolve(__dirname, "src"),
                use: [
                    'css-hot-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: true,
                            localIdentName: '[name]_[local]--[hash:base64:5]',
                            minimize: false
                        }
                    },
                    'postcss-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            //   modifyVars: theme
                        }
                    }
                ]
            },
            {
                test: /\.(html)$/,
                use: [
                    'html-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [{
                        loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]"
                    }, // limit 字段代表图片打包限制,指当图片大小小于限制时会自动转成 base64 码引用
                ],
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react']
                    }
                }
            },
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.scss']
    }
};